@import './variable.less';

* {
  box-sizing: border-box;
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'),
    url(../fonts/SourceSansPro-Light.ttf.woff2) format('woff2'),
    url(../fonts/SourceSansPro-Light.ttf.woff) format('woff');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro'), local('SourceSansPro-Regular'),
    url(../fonts/SourceSansPro-Regular.ttf.woff2) format('woff2'),
    url(../fonts/SourceSansPro-Regular.ttf.woff) format('woff');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'),
    url(../fonts/SourceSansPro-Semibold.ttf.woff2) format('woff2'),
    url(../fonts/SourceSansPro-Semibold.ttf.woff) format('woff');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
    url(../fonts/SourceSansPro-Bold.ttf.woff2) format('woff2'),
    url(../fonts/SourceSansPro-Bold.ttf.woff) format('woff');
}

body {
  width: 100vw;
  overflow: hidden;
  min-height: 100vh;
  font-family: 'Source Sans Pro', 'Microsoft YaHei', 'SimSun', 'Helvetica Neue',
    Helvetica, Arial, sans-serif;
  font-style: normal;
  font-variant-ligatures: normal;
  font-variant-caps: normal;
  font-variant-numeric: normal;
  font-variant-east-asian: normal;
  font-weight: normal;
  font-stretch: normal;
  color: @font-color;
  font-size: @font-size;
  line-height: @line-height;
  margin: 0;
}

hr,
.separator {
  margin: 16px 0;
  border: 0;
  border-top: 1px solid #eeeeee;
  box-sizing: content-box;
  height: 0;
}

a {
  color: @color-primary;
}

input,
select {
  padding: 6px 10px;
  font-size: inherit;
  line-height: @line-height;
  color: inherit;
  background-color: #fff;
  background-image: none;
  border: 1px solid @border-color;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

textarea {
  box-shadow: none;
  padding: 6px 10px;
  border: 1px solid @border-color;
}

input:focus,
textarea:focus,
select:focus {
  border-color: @border-focus;
  outline: 0;
  box-shadow: inset 0 1px 1px @box-shadow-in-color,
    0 0 8px @box-shadow-out-color;
}

.btn {
  &,
  &:visited {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    white-space: nowrap;
    padding: 6px 16px;
    font-size: inherit;
    line-height: @line-height;
    user-select: none;
    background-color: #fff;
    border: 1px solid @border-color;
    text-decoration: none;
  }
  &:focus {
    outline: none;
    background-color: #fff;
  }

  &:hover,
  &:focus {
    background-color: #ededed;
    border-color: #d6dae2;
    outline: none;
  }

  &:active {
    background-color: #ececec;
    border-color: #c6cacf;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  }
}

.btn.btn-success,
.btn.btn-new,
.btn.btn-save {
  background-color: #38ae67;
  border-color: #2faa60;
  color: #fff;
}

.btn.btn-success:hover,
.btn.btn-success:focus,
.btn.btn-new:hover,
.btn.btn-new:focus,
.btn.btn-save:hover,
.btn.btn-save:focus {
  background-color: #37bb6c;
  border-color: #2ca05b;
  color: #fff;
}

// form style
.control-form {
  .form-group {
    margin-bottom: 15px;
    margin-left: -15px;
    margin-right: -15px;
  }

  .form-group > label {
    font-weight: bold;
  }

  .form-action {
    margin-top: 0;
    padding: 15px;
    background-color: @toolbar-backgroud-color;
    border-top: 1px solid @toolbar-border-color;
    text-align: right;

    .btn-cancel {
      color: inherit;
    }
  }

  .control-label {
    display: inline-block;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 5px;
  }

  .control-input {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;

    input,
    textarea,
    select,
    .com-dropdown,
    .com-dropdown .dropdown {
      width: 100%;
    }

    .com-switch {
      margin-top: 6px;
    }

    .readonly-text {
      display: inline-block;
      margin-bottom: 5px;
    }

    @media (min-width: 768px) {
      .readonly-text {
        padding-top: 6px;
        vertical-align: top;
        margin-bottom: auto;
      }
    }

    textarea {
      color: inherit;
    }

    .com-dropdown .dropdown {
      max-height: 200px;
      overflow-y: scroll;
    }

    .btn {
      padding: 6px 10px;
      margin-bottom: 10px;
      margin-right: 10px;
      color: inherit;
    }

    .btn.active {
      /* border-color: @font-color; */
      color: @color-secondary;
      border: 1px solid @color-secondary;
      box-shadow: 0 0 2px 0 @color-secondary;
      background-color: inherit;
    }

    input:disabled {
      background-color: #ededed4f;
    }

    textarea:disabled {
      background-color: #ededed4f;
    }

    .btn:disabled {
      cursor: default;
      background-color: #ededed96;
      box-shadow: none;
    }

    .com-dropdown:focus {
      border-color: #3aabf0;
      outline: 0;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
        0 0 8px rgba(58, 171, 240, 0.6);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
        0 0 8px rgba(58, 171, 240, 0.6);
    }

    .com-dropdown .btn {
      margin-bottom: 0;
      margin-right: 0;
      width: 100%;
      text-align: left;
    }

    .com-dropdown .trigger:focus {
      background-color: #ededed;
      border-color: #d6dae2;
      outline: none;
    }

    .com-dropdown .fa-caret-down {
      float: right;
      padding-top: 4px;
    }

    .com-autocomplete .acp-lst {
      width: auto;
      right: -5px;
    }

    .badge {
      display: inline-block;
      border-radius: 25%;
      background-color: @toolbar-backgroud-color-badge;
      color: white;
      margin-right: 2px;
      text-align: center;
      width: 18px;
      height: 18px;
      line-height: 18px;
    }

    .badge.active,
    .active .badge {
      background-color: @color-secondary;
    }

    .help-block {
      display: block;
      margin-top: 5px;
      color: #9c9c9c;
      font-size: @font-size - 2px;
    }
  }

  @media (min-width: @window-tablet) {
    .control-label {
      width: 16.66666667%;
      text-align: right;
      padding-top: 6px;
      vertical-align: top;
      margin-bottom: auto;
    }

    .control-input {
      display: inline-block;
      width: 82.33333333%;
    }
  }
}
